<!DOCTYPE html>
<html>
<head>
    <title>Resistor Network Diagram</title>
</head>
<body>
    <canvas id="circuitCanvas" width="400" height="350"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Define geometric parameters
        const startX = 120;
        const startY = 60;
        const sideLength = 200;
        const midX = startX + sideLength / 2;
        const midY = startY + sideLength / 2;
        const endX = startX + sideLength;
        const endY = startY + sideLength;

        // Set line style
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;

        // Draw the outer square
        ctx.beginPath();
        ctx.moveTo(startX, startY);
        ctx.lineTo(endX, startY);
        ctx.lineTo(endX, endY);
        ctx.lineTo(startX, endY);
        ctx.closePath();
        ctx.stroke();

        // Draw the inner horizontal line
        ctx.beginPath();
        ctx.moveTo(startX, midY);
        ctx.lineTo(endX, midY);
        ctx.stroke();

        // Draw the inner vertical line
        ctx.beginPath();
        ctx.moveTo(midX, startY);
        ctx.lineTo(midX, endY);
        ctx.stroke();

        // Set font style for labels
        ctx.fillStyle = 'black';
        ctx.font = "italic 24px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Add label A
        ctx.fillText('A', startX - 20, midY);

        // Add label B
        ctx.fillText('B', midX, startY - 20);

        // Add label C
        ctx.fillText('C', startX, startY - 20);
    </script>
</body>
</html>